<template>
  <el-table :data="tableData" border height="350px">
    <el-table-column label="序号" width="80px" max-height="50px">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="common_username"
      label="用户名"
      width="80px"
      max-height="50px"
    />
    <el-table-column
      prop="type"
      label="事件类型"
      width="90px"
      max-height="50px"
    />
    <el-table-column
      prop="address"
      label="事件地址"
      width="90px"
      max-height="50px"
    >
    </el-table-column>
    <el-table-column
      prop="address_right"
      label="校正地址"
      width="90px"
      max-height="50px"
    >
    </el-table-column>
    <el-table-column
      prop="building"
      label="附近建筑"
      width="90px"
      max-height="50px"
    >
    </el-table-column>
    <el-table-column
      prop="time"
      label="发生时间"
      width="90px"
      max-height="50px"
    >
    </el-table-column>
    <el-table-column
      prop="discribe"
      label="事件描述"
      width="90px"
      max-height="50px"
    >
    </el-table-column>
    <el-table-column label="定位" width="90px" max-height="50px">
      <template #default="scope">
        <el-button size="small" @click="location(scope.row)"> 定位</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100px" max-height="50px">
      <template #default="scope">
        <el-select
          size="small"
          style="width: 74px"
          v-model="scope.row.response"
          :disabled="scope.row.isAdd === '1' ? true : false"
          @change="ResChange(scope.row.response, scope.row)"
        >
          <el-option label="待审核" :value="'0'" />
          <el-option label="通过" :value="'1'" />
          <el-option label="忽略" :value="'2'" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column
      label="添加"
      width="80px"
      max-height="50px"
      v-if="thekey === '1'"
    >
      <template #default="{ row }">
        <el-button
          type="danger"
          size="small"
          v-if="row.isAdd === '0'"
          @click="addPassEvt(row)"
          >添加</el-button
        >
        <span v-else>已添加</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 创建弹框 -->
  <el-dialog
    v-model="eventTraDialogVis"
    width="400"
    :title="traEventTitle"
    draggable
    append-to-body
    :destroy-on-close="true"
  >
    <el-form
      label-width="100px"
      :model="eventFormTra"
      style="max-width: 460px"
      ref="ruleFormRefTra"
      :rules="rulesTra"
    >
      <el-form-item label="事件编号" prop="eventNum">
        <el-input v-model="eventFormTra.eventNum" />
      </el-form-item>
      <el-form-item label="事件类型" prop="eventType">
        <el-select
          v-model="eventFormTra.eventType"
          placeholder="碰撞"
          clearable
        >
          <el-option label="碰撞" value="碰撞" />
          <el-option label="失火" value="失火" />
          <el-option label="碾压" value="碾压" />
          <el-option label="刮擦" value="刮擦" />
          <el-option label="翻车" value="翻车" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="事件等级" prop="eventLevel">
        <el-select
          v-model="eventFormTra.eventLevel"
          placeholder="轻微事故"
          clearable
        >
          <el-option label="轻微事故" :value="1" />
          <el-option label="一般事故" :value="2" />
          <el-option label="重大事故" :value="3" />
          <el-option label="特大事故" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" prop="date">
        <el-date-picker
          v-model="eventFormTra.date"
          type="date"
          placeholder="Pick a date"
          clearable
        />
      </el-form-item>
      <el-form-item label="发生地点" prop="address">
        <el-input v-model="eventFormTra.address" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="eventFormTra.carId" />
      </el-form-item>
      <el-form-item label="驾驶员">
        <el-input v-model="eventFormTra.driver" />
      </el-form-item>
      <el-form-item label="处理状态" prop="status">
        <el-select v-model="eventFormTra.status" placeholder="待处理" clearable>
          <el-option label="待处理" :value="0" />
          <el-option label="处理中" :value="1" />
          <el-option label="已归档" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitEventForm(ruleFormRefTra)">
          提交
        </el-button>
        <el-button @click="resetEventForm(ruleFormRefTra)">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { formattedDate } from "../../../../../utils/formatTime";
import { TraEventManageHooks } from "../TrafficEventManage/TraEventManageHooks";
const { addEventPointByPosition } = TraEventManageHooks();
let $docLayer = null;
let $map = null;
onMounted(() => {
  $docLayer = inject("$docLayer");
  $map = inject("$map");
});
const $props = defineProps({
  tableData: {
    required: true,
    type: Array,
  },
  thekey: {
    required: true,
    type: String,
  },
});
const $emits = defineEmits(["changeTab"]);
const openConfirm = (confirm_content, success_msg, response, row) => {
  ElMessageBox.confirm(confirm_content, "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: success_msg,
        showClose: true,
      });
      // 除了点击确认状态的改变之后，还要跳到改变后的那个tab
      $emits("changeTab", response);
    })
    .catch(() => {
      // 取消操作，要把已经改变的response属性改回来
      row.response = $props.thekey;
      ElMessage({
        type: "info",
        message: "已取消操作",
        showClose: true,
      });
    });
};
// 审核状态改变
const ResChange = (response, row) => {
  //   console.log(response);
  let comfirm_res = false;
  if (response === "0") {
    openConfirm("确认要改为待审核吗", "已返回待审核列表", response, row);
  } else if (response === "1") {
    openConfirm("确认要审核通过吗", "已添加到审核通过列表", response, row);
  } else if (response === "2") {
    openConfirm("确认要改为忽略吗", "已添加到忽略列表", response, row);
  }
};

// 定位
const location = (row) => {
  // console.log(row.lnglat, 88888888);
  $map.getView().animate({
    center: row.lnglat,
    zoom: 16,
    duration: 1000,
  });
};

// 添加事件
/* 交通事件弹框 */
const eventTraDialogVis = ref(false);
const traEventTitle = ref("");
// 表单dom 表单数据
const ruleFormRefTra = ref();
const eventFormTra = reactive({
  eventNum: "",
  eventType: "",
  eventLevel: "",
  date: "",
  address: "",
  carId: "",
  driver: "",
  status: "",
});
// 表单校验规则
const rulesTra = reactive({
  eventNum: [
    { required: true, message: "请提供事件编号", trigger: "blur" },
    { min: 2, max: 50, trigger: "blur" },
  ],
  eventType: [{ required: true, message: "请选择事件类型", trigger: "blur" }],
  eventLevel: [{ required: true, message: "请选择事件等级", trigger: "blur" }],
  address: [
    { required: true, message: "请输入发生地点", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  date: [{ required: true, message: "请输入发生时间", trigger: "blur" }],
  status: [{ required: true, message: "请选择处理状态", trigger: "blur" }],
});
// 自动填充表单 传入表单数据和事件点的属性对象
const formAutofill = (formData, attr) => {
  eventFormTra.eventNum = attr.事件编号;
  eventFormTra.eventType = attr.事件类型;
  eventFormTra.eventLevel = Number(attr.事件等级);
  eventFormTra.date = attr.发生时间;
  eventFormTra.address = attr.发生地点;
  eventFormTra.carId = attr.车牌号;
  eventFormTra.driver = attr.驾驶员;
  eventFormTra.status = Number(attr.处理状态);
};
// 清空重置表单
const formReset = (formData) => {
  eventFormTra.eventNum = "";
  eventFormTra.eventType = "";
  eventFormTra.eventLevel = "";
  eventFormTra.date = "";
  eventFormTra.address = "";
  eventFormTra.carId = "";
  eventFormTra.driver = "";
  eventFormTra.status = "";
};

// 添加审核通过事件到地图
// 点坐标
let curRow = null;
const addPassEvt = (row) => {
  // console.log(row);
  formReset();
  // 设置弹框标题
  traEventTitle.value = "添加审核通过事件";
  // 自动填充表单
  let str = "SJ" + formattedDate();
  eventFormTra.eventNum = str.replace(/[\s/:]/g, "");
  eventFormTra.eventType = row.type;
  eventFormTra.date = row.time;
  eventFormTra.address = row.address_right;
  eventFormTra.status = Number(row.status);
  // 获取当前行的坐标和添加状态
  curRow = row;
  // 显示弹框
  eventTraDialogVis.value = true;
};

// 表单提交
const submitEventForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // 表单验证 valid 有效
      // console.log("提交成功!");
      // 表单数据
      // console.log(eventFormTra, 77);
      // 将点添加到地图文档
      if (traEventTitle.value === "添加审核通过事件") {
        addEventPointByPosition(eventFormTra, curRow.lnglat, $docLayer);
      }
      // 隐藏弹框
      eventTraDialogVis.value = false;
      // 修改点的添加状态，为已添加
      curRow.isAdd = "1";
    } else {
      // 表单验证 valid 无效
      // console.log("提交失败!");
      return false;
    }
  });
};
// 表单重置
const resetEventForm = (formEl) => {
  if (!formEl) return;
  formReset();
  // 隐藏弹框
  eventTraDialogVis.value = false;
};
</script>

<style lang="scss" scoped></style>
